<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/bootstrap@3.3.4/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .glyphicon {
            font-size: 100px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- optimum取得值-->
    <meter value="600" min="0" max="2000" low="200" high="800" optimum="500" id="meterNode"></meter>
    <br>
    <!--  显示任务的完成进度 -->
    <progress min="0" max="100"></progress>
    <br>
    <!-- 列表标签 -->
    <input type="text" placeholder="张三" list="ma">
    <datalist id="ma">
        <option value="你猜"></option>
        <option value="你猜"></option>
        <option value="人你猜"></option>
    </datalist>
    <br>
    <!-- ui的小配件 -->
    <details close>
        <!-- 标题 -->
        <summary>李四的优点</summary>
        <p>天才</p>
        <p>IQ值800</p>
        <p>就是这么任性</p>
    </details>
    <br>

    <p>
        <ruby>哈
            <rt>IQ</rt>
        </ruby>哈哈哈哈哈哈</p>

    <p>李四
        <mark>哈哈</mark>
    </p>

    <!-- 第二个
    <div class="box box1 box2 box3" id="box"></div>
    <div contenteditable="true">张三真帅！！</div> -->


    <!-- 第三个
    <div data-aaa="box" aa='bbb' id="box"></div> -->


    <!-- 第四个    表单
    <form action="http://baidu.com" method="get">
        <label for="email">电子邮件：</label>
        <input type="email" id="email"><br>
        <label for="url">url：</label>
        <input type="url" id="url"><br>
        <label for="number">number：</label>
        <input type="number" id="number" min="1" max="10" step="3"><br>
        <label for="range">range：</label>
        <input type="range" id="range" min="1" max="10" step="3"><br>
        <label for="date">date：</label>
        <input type="date" id="date"><br>
        <label for="month">month：</label>
        <input type="month" id="month"><br>
        <label for="week">week：</label>
        <input type="week" id="week"><br>
        <label for="time">time：</label>
        <input type="time" id="time"><br>
        <label for="datetime-local">datetime-local：</label>
        <input type="datetime-local" id="datetime-local"><br>
        <input type="color"><br>
        <input type="submit" value="提交">
    </form> -->

    <!-- 第五个  属性
    <form action="http://baidu.com" method="GET" autocomplete="on">
        <input type="text" autofocus><br>
        <input type="text"><br>
        <input type="submit" value="提交">
    </form> -->

    <!-- bootstrap
    <form class="form-inline">
        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
        </div>           
        <button type="submit" class="btn btn-default">Submit</button>
    </form> -->

    <!-- 图标字体
    <p class="glyphicon glyphicon-asterisk"></p>
    <p class="glyphicon glyphicon-user"></p> -->


    <script>
    // // 第一个
    //     //  获取标签的属性       
    //     console.log( meterNode.getAttribute('value'));
    //     meterNode.setAttribute('value',800);

    // // 第二个
    //     console.log(box.classList);
    //     box.classList.add('box4');
    //     console.log(box.classList);
    //     box.classList.add('box3');
    //     console.log(box.classList);
    //     box.classList.remove('box3');
    //     console.log(box.classList);
    //     box.classList.toggle('box5');
    //     console.log(box.classList);
    //     box.classList.toggle('box1');
    //     console.log(box.classList);
    //     var arr = new Array();
    //     console.log(arr);

    // // 第三个
    //     console.log(box.getAttribute('data-aaa'));
    //     console.log(box.dataset.aaa);
    //     box.dataset.aaa = 'bbb';
    //     console.log(box.dataset.aa)
    //     var a = 'aa';
    //     var b = 'bb';
    //     var obj1 = {
    //         name:'lili',
    //         age:18,
    //         hobbyHa:'footbball',           
    //     }
    //     obj1.sex = '男';            
    //     obj1[a+b] = 'hahha';         
    //     console.log(obj1);
    //     console.log(obj1.name);
    //     console.log(obj1.hobbyHa);
    //     console.log(obj1['name']);
    //     console.log(obj1[name]);//name是一个变量
    //     //console.log(obj1.) 报错
    </script>
</body>

</html>